<div class="page_content_offset">
    <div class="container">
        <h2 class="tt_uppercase m_bottom_20 color_dark heading1 animate_ftr">Liên tục cập nhật</h2>
        <!--filter navigation of products-->
        <ul class="horizontal_list clearfix tt_uppercase isotope_menu f_size_ex_large">
            <li class="active m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter="*">All</button>
            </li>
            <li class="m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter=".featured">Featured</button>
            </li>
            <li class="m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter=".new">New</button>
            </li>
            <li class="m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter=".specials">Specials</button>
            </li>
            <li class="m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter=".hit">Hit</button>
            </li>
            <li class="m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter=".random">Random</button>
            </li>
            <li class="m_right_5 m_bottom_10 m_xs_bottom_5 animate_ftr">
                <button class="button_type_2 bg_light_color_1 r_corners tr_delay_hover tt_uppercase box_s_none" data-filter=".rated">Rated</button>
            </li>
        </ul>
        <!--products-->
        <section class="products_container clearfix m_bottom_25 m_sm_bottom_15"> 
            <!--product item-->
            <?php
            if (isset($products)) {
                foreach ($products as $product) {
                    $product_id = $product->product_id;
                    $product_name = $product->product_name;
                    $product_price = $product->product_price;
                    $product_thumb_image = $product->product_thumb_image;
                    $product_name_image = $product->product_name_image;
                    ?>
                    <div class="product_item">       
                        <figure class="r_corners photoframe shadow relative hit animate_ftb long"> 
                            <!--product preview--> 
                            <a href="/index.php/product_detail/<?php echo $product_id ?>" class="d_block relative pp_wrap"> 
                                <!--hot product--> 
                                <span class="hot_stripe"><img src="<?php echo base_url('assets'); ?>/images/hot_product.png" alt=""></span> <img src="<?php echo base_url('uploads/images/'); ?><?php echo "/"; ?><?php echo $product_thumb_image; ?>" class="tr_all_hover" alt=""> <span data-popup="#quick_view_product" class="button_type_5 box_s_none color_light r_corners tr_all_hover d_xs_none">Xem nhanh</span> </a> 
                            <img id="product-icon-<?php echo $product_id ?>" style="display:none" src="<?php echo base_url('uploads/images/'); ?><?php echo "/"; ?><?php echo $product_name_image; ?>"> 
                            <!--description and price of product-->
                            <figcaption>
                                <h5 class="m_bottom_10"><a id="product-name-<?php echo $product_id ?>" data-name="<?php echo $product_name; ?>" href="/product_detail/<?php echo $product_id ?>" class="color_dark"><?php echo $product_name; ?></a></h5>
                                <div class="clearfix">
                                    <p id="product-item-price-<?php echo $product_id ?>" data-price="<?php echo $product_price; ?>" class="scheme_color f_left f_size_large m_bottom_15"><?php echo $product_price, "vnd"; ?></p>
                                    <!--rating-->
                                    <ul class="horizontal_list f_right clearfix rating_list tr_all_hover">
                                        <li class="active"> <i class="fa fa-star-o empty tr_all_hover"></i> <i class="fa fa-star active tr_all_hover"></i> </li>
                                        <li class="active"> <i class="fa fa-star-o empty tr_all_hover"></i> <i class="fa fa-star active tr_all_hover"></i> </li>
                                        <li class="active"> <i class="fa fa-star-o empty tr_all_hover"></i> <i class="fa fa-star active tr_all_hover"></i> </li>
                                        <li class="active"> <i class="fa fa-star-o empty tr_all_hover"></i> <i class="fa fa-star active tr_all_hover"></i> </li>
                                        <li> <i class="fa fa-star-o empty tr_all_hover"></i> <i class="fa fa-star active tr_all_hover"></i> </li>
                                    </ul>
                                </div>
                                <button class="button_type_4 bg_scheme_color r_corners tr_all_hover color_light mw_0" onclick="addToCart(<?php echo $product_id ?>)">Thêm vào giỏ</button>
                                <button class="button_type_4 bg_scheme_color r_corners tr_all_hover color_light mw_0" ">Giá mong muốn</button>
                            </figcaption>
                        </figure>
                    </div>
                    <?php
                }
            }
            ?>
        </section>
    </div>
</div>
